<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .da {
            width: 1200px;
            border: 1px solid black;
            margin-top: 100px;
        }

        .ti {
            width: 600px;
            height: 60px;
            margin-top: 20px;
        }

        .tia {
            width: 200px;
            height: 65px;
            margin-top: 20px;
        }
        li{
            width: 580px;
            list-style: none;
            border: 1px solid black;
            margin-bottom: 20px;
        }
        .shan{
            float: right;
        }
        .wen{
            margin-left: 20px;
        }
    </style>
</head>

<body>
    <h1>待办事项</h1>
    <input type="text" class="ti"><button class="tia" onclick="pu()">添加事项</button>
    <div class="da">
        <h1>事项列表</h1>
        <ul class="lie">

        </ul>
    </div>
    <button onclick="xi()">查看所有事项</button>
    <button onclick="wa()">查看已完成事项</button>
    <button onclick="we()">查看未完成事项</button>
    <button onclick="qi()">清除所有事项</button>
    <script>
        var arr = []
        var ul = document.querySelector('.lie')
        function apply() {
            ul.innerHTML = ''
            arr.forEach((item => {
                ul.innerHTML += `
            <li>
                <input type="checkbox" onclick="wan(${item.id})" ${item.is ? 'checked' : ''}>
                <span class="wen">${item.name}</span>
                <button onclick="del(${item.id})" class="shan">删除</button>
            </li>
            `
            }))
        }
        apply()
        // 添加
        function pu() {
            var inp1 = document.querySelector('.ti').value
            arr.push({
                id: arr.length + 1,
                name: inp1,
                is: false,
            })
            apply()
        }
        // 删除
        function del(i) {
            var index = arr.findIndex(item => item.id == i)
            arr.splice(index, 1)
            apply()
        }
        // 完成事项
        function wan(i) {
            var d = arr.find(item => item.id == i)
            d.is = event.target.checked
            var a = event.target.nextSibling.nextSibling
            if (d.is == true) {
                a.innerHTML = `<del>${d.name}</del>`
            } else {
                a.innerHTML = `${d.name}`
            }
        }
        //显示所有事项
        function xi(){
            ul.innerHTML = ''
            arr.forEach((item => {
                ul.innerHTML += `
            <li>
                <input type="checkbox" onclick="wan(${item.id})" ${item.is ? 'checked' : ''}>
                <span>${item.name}</span>
                <button onclick="del(${item.id})">删除</button>
            </li>
            `
            }))
        }
        //查看已完成事项
        function wa(){
            var ar = arr.filter(item=>item.is == true)
            ul.innerHTML = ''
            ar.forEach((item => {
                ul.innerHTML += `
            <li>
                <input type="checkbox" onclick="wan(${item.id})" ${item.is ? 'checked' : ''}>
                <span>${item.name}</span>
                <button onclick="del(${item.id})">删除</button>
            </li>
            `
            }))
        }
        //查看未已完成事项
        function we(){
            var ar = arr.filter(item=>item.is == false)
            ul.innerHTML = ''
            ar.forEach((item => {
                ul.innerHTML += `
            <li>
                <input type="checkbox" onclick="wan(${item.id})" ${item.is ? 'checked' : ''}>
                <span>${item.name}</span>
                <button onclick="del(${item.id})">删除</button>
            </li>
            `
            }))
        }
        //清除所有事项
        function qi(){
            ul.innerHTML = ''
        }
    </script>
</body>

</html>